<template >
  <div class="home" id='home'>
    <transition-group :name="transitionName">
      <top-bar v-if="$route.meta.showTop" key="0" />
      <router-view key="1" />
    </transition-group>
    <bottom-bar v-if="$route.meta.showBottom" />
  </div>

</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { TopBar, BottomBar } from "@/layout";
import { isWeixin, isIOS, isPhone } from "@/utils";
import { createNamespacedHelpers } from "vuex";
const common = createNamespacedHelpers("common");
export default {
  name: 'home',
  components: {
    TopBar,
    BottomBar
  },
  // 定义属性
  data() {
    return {
      transitionName: "",
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    ...common.mapState['equipment', 'leftMenu', 'currentWidth']
  },
  // 监控data中的数据变化
  watch: {
    $route(to, from) {
      this.getEquipment()
      if (to.meta.index > from.meta.index) {
        //设置动画名称
        this.transitionName = "slide-left";
      } else {
        this.transitionName = "slide-right";
      }
    },
  },
  // 方法集合
  methods: {
    ...common.mapMutations(["getCurrentEquipment", 'getLeftMenu', 'getCurrentWidth']),
    //获取当前设备
    getEquipment() {
      let screenWidth =
        document.body.clientWidth || document.documentElement.clientWidth;
      let equipment = {};
      let leftMenu = {};
      equipment.isWeixin = isWeixin();
      equipment.isIOS = isIOS();
      equipment.isPhone = isPhone(780);
      leftMenu.isMenuActive = !isPhone(780);
      this.getLeftMenu(leftMenu)
      this.getCurrentEquipment(equipment);
      this.getCurrentWidth(screenWidth);
      let that = this;
      window.onresize = function () {
        let current = document.body.clientWidth || document.documentElement.clientWidth;
        equipment.isWeixin = isWeixin();
        equipment.isIOS = isIOS();
        equipment.isPhone = isPhone(780);
        leftMenu.isMenuActive = !isPhone(780);
        that.getCurrentWidth(current);
        that.getCurrentEquipment(equipment);
        that.getLeftMenu(leftMenu)
      };
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getEquipment();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
  beforeCreate() { }, // 生命周期 - 创建之前
  beforeMount() { }, // 生命周期 - 挂载之前
  beforeUpdate() { }, // 生命周期 - 更新之前
  updated() { }, // 生命周期 - 更新之后
  beforeDestroy() { }, // 生命周期 - 销毁之前
  destroyed() { }, // 生命周期 - 销毁完成
  activated() { }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less' scoped>
.home {
  // max-width: 1440px;
  // min-height: 1024px;
  // margin: 0 auto;
  height: 100%;
  // overflow: hidden;
  position: relative;
  .slide-right-enter-active,
  .slide-right-leave-active,

  .slide-left-enter-active,
  .slide-left-leave-active {
    will-change: transform;
    transition: all 500ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
    position: absolute;
    backface-visibility: hidden;
    width: 100%;
    height: 100%;
  }

  .slide-right-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  .slide-right-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  .slide-left-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  .slide-left-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
}

@media screen and (max-width: 650px) {
  .home {
    min-height: unset;
  }
}
</style>